2025年9月8日中文

了解如何使用自定义 Hook 和错误边界在 React 应用程序中有效地处理和传播错误，即使在资源加载失败时也能确保健壮且用户友好的体验。

React use Hook 错误传播：掌握资源加载错误链

现代 React 应用程序通常依赖于从各种来源（API、数据库甚至本地存储）获取数据。当这些资源加载操作失败时，至关重要的是优雅地处理这些错误，并为用户提供有意义的体验。本文探讨如何使用自定义 Hook、错误边界和强大的错误处理策略，在 React 应用程序中有效地管理和传播错误。

理解错误传播的挑战

在典型的 React 组件树中，错误可能发生在各个级别。获取数据的组件可能会遇到网络错误、解析错误或验证错误。理想情况下，应该捕获并适当地处理这些错误，但仅仅在错误发生的组件中记录错误通常是不够的。我们需要一种机制来：

将错误报告到中心位置：这允许进行日志记录、分析和潜在的重试。
显示用户友好的错误消息：代替损坏的 UI，告知用户问题并建议可能的解决方案。
防止级联故障：一个组件中的错误不应导致整个应用程序崩溃。

这就是错误传播发挥作用的地方。错误传播涉及将错误传递到组件树，直到它到达合适的错误处理边界。React 的错误边界旨在捕获在其子组件的渲染、生命周期方法和构造函数期间发生的错误，但它们本质上不处理异步操作中抛出的错误，例如由 useEffect 触发的错误。这就是自定义 Hook 可以弥合差距的地方。

利用自定义 Hook 进行错误处理

自定义 Hook 允许我们将可重用的逻辑（包括错误处理）封装在单个可组合的单元中。让我们创建一个自定义 Hook，useFetch，它处理数据获取和错误管理。

示例：一个基本的 useFetch Hook

这是一个简化版本的 useFetch Hook：

            
import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Clear any previous errors
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

此 Hook 从给定的 URL 获取数据，并管理加载状态和潜在的错误。error 状态变量保存获取过程中发生的任何错误。

向上传播错误

现在，让我们增强此 Hook 以使用上下文向上传播错误。这允许父组件收到 useFetch Hook 中发生的错误的通知。

1. 创建一个错误上下文

首先，我们创建一个 React 上下文来保存错误处理函数：

            
import { createContext, useContext } from 'react';

const ErrorContext = createContext(null);

export const ErrorProvider = ErrorContext.Provider;

export const useError = () => useContext(ErrorContext);

2. 修改 useFetch Hook

现在，我们修改 useFetch Hook 以使用错误上下文：

            
import { useState, useEffect } from 'react';
import { useError } from './ErrorContext';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [localError, setLocalError] = useState(null); // Local error state
  const handleError = useError(); // Get the error handler from context

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLocalError(null);
      } catch (e) {
        setLocalError(e);
        if (handleError) {
          handleError(e); // Propagate the error to the context
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url, handleError]);

  // Return both data and local error. Component can decide which to display.
  return { data, loading, localError };
}

export default useFetch;

请注意，我们现在有两个错误状态：localError（在 Hook 内部管理）和通过上下文传播的错误。我们在内部使用 localError，但也可以访问它以进行组件级别的处理。

3. 使用 ErrorProvider 包装应用程序

在应用程序的根目录中，使用 ErrorProvider 包装使用 useFetch 的组件。这为所有子组件提供错误处理上下文：

            
import React, { useState } from 'react';
import { ErrorProvider } from './ErrorContext';
import MyComponent from './MyComponent';

function App() {
  const [globalError, setGlobalError] = useState(null);

  const handleError = (error) => {
    console.error("Error caught at the top level:", error);
    setGlobalError(error);
  };

  return (
    
      {globalError ? (
        Error: {globalError.message}
      ) : (
        
      )}
    
  );
}

export default App;

4. 在组件中使用 useFetch Hook

            
import React from 'react';
import useFetch from './useFetch';

function MyComponent() {
  const { data, loading, localError } = useFetch('https://api.example.com/data');

  if (loading) {
    return Loading...;
  }

  if (localError) {
    return Error loading data: {localError.message};
  }

  return (
    
      Data:
      {JSON.stringify(data, null, 2)}
    
  );
}

export default MyComponent;

解释

错误上下文：ErrorContext 提供了一种跨组件共享错误处理函数 (handleError) 的方法。
错误传播：当 useFetch 中发生错误时，将调用 handleError 函数，将错误传播到 App 组件。
集中式错误处理：App 组件现在可以以集中的方式处理错误，记录错误、显示错误消息或采取其他适当的操作。

错误边界：意外错误的安全网

虽然自定义 Hook 和上下文提供了一种处理异步操作中错误的方法，但错误边界对于捕获渲染期间可能发生的意外错误至关重要。错误边界是 React 组件，可以捕获其子组件树中任何位置的 JavaScript 错误，记录这些错误，并显示回退 UI 而不是崩溃的组件树。它们捕获渲染期间、生命周期方法和它们下方整个树的构造函数中的错误。

创建一个错误边界组件

            
import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error in ErrorBoundary:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        
          Something went wrong.
          
            {this.state.error && this.state.error.toString()}\n			

            {this.state.errorInfo && this.state.errorInfo.componentStack}
          
        
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

使用错误边界

使用 ErrorBoundary 组件包装任何可能抛出错误的组件：

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    
      
        
      
    
  );
}

export default App;

结合使用错误边界和自定义 Hook

为了实现最强大的错误处理，请将错误边界与自定义 Hook（如 useFetch）结合使用。错误边界捕获意外的渲染错误，而自定义 Hook 管理来自异步操作的错误并将其向上传播。ErrorProvider 和 ErrorBoundary 可以共存；ErrorProvider 允许粒度化的错误处理和报告，而 ErrorBoundary 防止灾难性的应用程序崩溃。

React 中错误处理的最佳实践

集中式错误日志记录：将错误发送到中心日志记录服务以进行监控和分析。Sentry、Rollbar 和 Bugsnag 等服务是不错的选择。考虑使用日志记录级别（例如，console.error、console.warn、console.info）来区分事件的严重性。
用户友好的错误消息：向用户显示清晰且有帮助的错误消息。避免使用技术术语并提供解决问题的建议。考虑本地化：确保不同语言和文化背景的用户能够理解错误消息。
优雅降级：设计您的应用程序，以便在发生错误时优雅地降级。例如，如果某个 API 调用失败，请隐藏相应的组件或显示占位符，而不是导致整个应用程序崩溃。
重试机制：为瞬态错误（例如网络故障）实施重试机制。但是，请注意避免无限重试循环，这可能会加剧问题。指数退避是一个不错的策略。
测试：彻底测试您的错误处理逻辑，以确保其按预期工作。模拟不同的错误场景，例如网络故障、无效数据和服务器错误。考虑使用 Jest 和 React Testing Library 等工具来编写单元测试和集成测试。
监控：持续监控您的应用程序是否存在错误和性能问题。设置警报，以便在发生错误时收到通知，从而使您可以快速响应问题。
考虑安全性：防止敏感信息显示在错误消息中。避免在面向用户的消息中包含堆栈跟踪或内部服务器详细信息，因为恶意行为者可能会利用此信息。

高级错误处理技术

使用全局错误状态管理解决方案

对于更复杂的应用程序，请考虑使用全局状态管理解决方案（如 Redux、Zustand 或 Recoil）来管理错误状态。这使您可以从应用程序中的任何位置访问和更新错误状态，从而提供一种集中式错误处理方法。例如，您可以在发生错误时调度一个操作来更新错误状态，然后使用选择器在任何组件中检索错误状态。

实施自定义错误类

创建自定义错误类来表示应用程序中可能发生的各种类型的错误。这使您可以轻松区分不同类型的错误并相应地处理它们。例如，您可以创建一个 NetworkError 类、一个 ValidationError 类和一个 ServerError 类。这将使您的错误处理逻辑更有条理且更易于维护。

使用断路器模式

断路器模式是一种设计模式，可以帮助防止分布式系统中的级联故障。基本思想是将对外部服务的调用包装在断路器对象中。如果断路器检测到一定数量的故障，它会“打开”电路并阻止对外部服务的任何进一步调用。经过一段时间后，断路器会“半打开”电路并允许对外部服务进行单次调用。如果调用成功，则断路器会“关闭”电路并允许所有调用恢复到外部服务。这可以帮助防止您的应用程序被外部服务中的故障压垮。

国际化 (i18n) 考虑因素

在与全球受众打交道时，国际化至关重要。错误消息应翻译成用户的首选语言。考虑使用像 i18next 这样的库来有效地管理翻译。此外，请注意不同文化对错误的看法。例如，一个简单的警告消息在不同的文化中可能会被不同地解释，因此请确保语气和措辞适合您的目标受众。

常见错误场景和解决方案

网络错误

场景：API 服务器不可用，或者用户的互联网连接已断开。

解决方案：显示一条消息，指示存在网络问题，并建议检查互联网连接。实施具有指数退避的重试机制。

无效数据

场景：API 返回的数据与预期的架构不匹配。

解决方案：在客户端实施数据验证以捕获无效数据。显示一条错误消息，指示数据已损坏或无效。考虑使用 TypeScript 在编译时强制执行数据类型。

身份验证错误

场景：用户的身份验证令牌无效或已过期。

解决方案：将用户重定向到登录页面。显示一条消息，指示他们的会话已过期，需要重新登录。

授权错误

场景：用户没有访问特定资源的权限。

解决方案：显示一条消息，指示他们没有必要的权限。如果他们认为自己应该拥有访问权限，请提供一个联系支持的链接。

服务器错误

场景：API 服务器遇到意外错误。

解决方案：显示一条通用错误消息，指示服务器存在问题。在服务器端记录错误以进行调试。考虑使用 Sentry 或 Rollbar 等服务来跟踪服务器错误。

结论

有效的错误处理对于创建健壮且用户友好的 React 应用程序至关重要。通过结合使用自定义 Hook、错误边界和全面的错误处理策略，您可以确保您的应用程序能够优雅地处理错误，并为用户提供有意义的体验，即使在资源加载失败时也是如此。请记住优先考虑集中式错误日志记录、用户友好的错误消息和优雅降级。通过遵循这些最佳实践，您可以构建具有弹性、可靠且易于维护的 React 应用程序，无论用户的位置或背景如何。